VARIABLES AND DATA TYPES

This note explains variables and data types in simple language.

It is written for learning, so the goal is not only to memorize definitions, but also to understand how JavaScript works in real code.

1. What is a variable?

A variable is a container used to store data.

You can imagine a variable like a box:

• the label on the box is the variable name
• the thing inside the box is the value

A variable consists of:

1. an identifier - its unique name
2. a place in memory where the value is stored

Example

const age = 20;
const username = "Aaron";

Here:

• age is a variable name
• 20 is the value
• username is another variable name
• "Aaron" is its value

Diagram 1. How to imagine a variable

1. Variable name → label on the box
2. Variable value → what is inside the box

Example:
age → 20
username → "Aaron"

2. Declaring variables

To create a variable, we declare it.

In modern JavaScript, variables are usually declared with:

• const
• let

Example

const age = 20;
const username = "Aaron";

A variable declaration has these parts:

1. a keyword (const or let)
2. a variable name
3. the assignment operator =
4. a value
5. a semicolon ;

Example with explanation

const age = 20;

• const → keyword
• age → variable name
• = → assignment operator
• 20 → value
• ; → end of the statement

It is better to write each variable declaration on a new line. This makes code easier to read.

3. Using a variable after declaration

After declaring a variable, you can use its name later in the code.

Example:

const age = 20;
console.log(age); // 20

const username = "Aaron";
console.log(username); // "Aaron"

Here, console.log(age) prints the value stored in age.

Important idea:

You use the variable name, and JavaScript gives you the value inside it.

Diagram 2. What happens when you use a variable

1. You create a variable
   const age = 20;

2. JavaScript stores the value
   age → 20

3. You use the variable name
   console.log(age);

4. JavaScript prints the stored value
   20

4. Reassigning a variable

Reassigning means changing the value of a variable after it was created.

Example:

let username = "Aaron";
username = "Benjamin";

Now the variable username no longer stores "Aaron". It stores "Benjamin".

Full example

let username = "Aaron";
console.log(username); // "Aaron"

username = "Benjamin";
console.log(username); // "Benjamin"

5. let and const

The difference between let and const is very important.

let

Use let when the value can change later.

let count = 1;
count = 2;

const

Use const when the value must not be reassigned.

const username = "Aaron";

If you try to change a const variable, JavaScript will throw an error.

const username = "Aaron";
username = "Benjamin"; // Error

Error example:

TypeError: Assignment to constant variable.

Diagram 3. const vs let

1. const
   - use when value should not change
   - reassignment is not allowed

2. let
   - use when value can change
   - reassignment is allowed

6. Which one should you use?

A very useful rule:

1. use const by default
2. use let only when the value really needs to change

Example with const

const username = "Aaron";
console.log(username);

Use this when the value will stay the same.

Example with let

let score = 0;
console.log(score); // 0

score = 1;
console.log(score); // 1

Use this when the value changes while the program runs.

This rule makes code:

• safer
• easier to read
• easier to maintain

7. Declaring a variable without a value

A variable declared with let does not need a value immediately.

Example:

let username;
console.log(username); // undefined

If a variable is declared but no value is assigned, JavaScript gives it the special value:

undefined

Later, you can assign a value to it.

let username;
console.log(username); // undefined

username = "Aaron";
console.log(username); // "Aaron"

8. Why creating a variable without let or const is bad

In modern JavaScript, especially in "use strict" mode, creating a variable without let or const causes an error.

Incorrect:

"use strict";

username = "Aaron"; // Error

Why this is important:

• it can break your code
• it creates confusion
• it is not good practice

So always declare variables with const or let.

9. Variable naming rules

Variable names must follow JavaScript rules.

A variable name can contain:

• letters (a-z, A-Z)
• digits (0-9)
• underscore (_)
• dollar sign ($)

But the first character must be:

• a letter
• _
• or $

It cannot start with a digit.

Correct examples

const user = "Aaron";
const userName = "Aaron";
const _value = 10;
const $price = 99;

Incorrect example

const 1user = "Aaron"; // Error

10. Variable names are case-sensitive

JavaScript treats uppercase and lowercase letters as different.

So these are different variables:

const user = "Aaron";
const User = "Benjamin";
const usEr = "Levi";

This means:

• user is not the same as User
• isActive is not the same as IsActive

Be careful with capitalization.

11. Good variable names

A good variable name should clearly explain what the variable stores.

Bad examples

const chislo = 10;
const korzina_tovariv = [];
const profil_koristuvacha = {};

These names may be unclear or inconsistent in international codebases.

Better examples

const number = 10;
const cart = [];
const userProfile = {};

Good names help other developers understand your code faster.

12. camelCase

A common style for naming variables in JavaScript is camelCase.

In camelCase:

• the first word starts with a lowercase letter
• each next word starts with an uppercase letter

Examples

const user = "Aaron";
const userProfile = {};
const isActive = true;
const activeGuestCount = 5;
const getUserData = "example";

camelCase is the standard style for JavaScript variable names.

13. Reserved keywords

JavaScript has reserved keywords. These words already have special meanings in the language.

For example:

• const
• let
• if
• for
• return

You cannot use these words as variable names.

Incorrect:

const let = 5; // Error

So always choose names that are not reserved by the language.

14. Common variable mistakes

When code runs, JavaScript can show errors in the browser console.

These error messages are helpful because they tell you:

• what went wrong
• where the problem happened

Reading errors is an important part of programming.

15. Mistake 1: wrong variable name

Example:

const username = "Aaron";
console.log(user); // Error

Problem:

• the variable is named username
• but the code tries to use user

Error:

ReferenceError: user is not defined

This means JavaScript cannot find a variable with the name user.

Correct version

const username = "Aaron";
console.log(username); // "Aaron"

16. Mistake 2: accessing a variable before declaration

Example:

console.log(age); // Error
let age = 20;

Here the program tries to use age before it is declared.

This causes an error.

A more correct modern error message is usually:

ReferenceError: Cannot access 'age' before initialization

Correct version

let age = 20;
console.log(age); // 20

Important rule:

Declare the variable first, then use it.

17. Mistake 3: reassigning a const

Example:

const username = "Aaron";
username = "Benjamin"; // Error

This causes an error because const variables cannot be reassigned.

Error:

TypeError: Assignment to constant variable.

Correct solution

If the value needs to change, use let.

let username = "Aaron";
username = "Benjamin";

Diagram 4. Three common variable errors

1. Wrong name
   username exists, but code uses user

2. Using before declaration
   console.log(age);
   let age = 20;

3. Reassigning const
   const username = "Aaron";
   username = "Benjamin"

Data Types

18. What is a data type?

A data type tells us what kind of value we are working with.

JavaScript can store different kinds of data, for example:

• numbers
• text
• true/false values
• empty values

An important feature of JavaScript:

A variable is not permanently locked to one data type.

That means a variable can store different types at different times, although in practice you should write clear code and not change types without a good reason.

19. Primitive data types in this note

The main primitive data types here are:

1. number
2. string
3. boolean
4. undefined
5. null

These are used very often in JavaScript.

20. Number

The number type is used for numeric values.

Numbers can be:

• positive
• negative
• whole
• fractional

Examples

const age = 20;
const salary = 3710.84;
const temperature = -5;

In JavaScript, the decimal part is separated with a dot, not a comma.

Correct:

const price = 19.99;

Incorrect:

const price = 19,99; // Incorrect

21. String

A string is text.

Strings are written inside:

• single quotes ''
• or double quotes ""

Examples

const username = 'Mango995';
const description = "JavaScript is awesome!";

Strings can contain:

• letters
• digits
• spaces
• symbols

Important:

"25"

is a string, not a number, because it is inside quotes.

22. Boolean

A Boolean value can only be:

• true
• false

These values are written without quotes.

Examples

const isModalOpen = true;
const isLoggedIn = false;

Compare:

• true → Boolean
• "true" → string

Boolean values are used for logic and conditions.

Example question:

• Is the user logged in?

Possible answer:

• true
• false

A good style is to give Boolean variables names that sound like questions.

Good Boolean variable names

const isActive = true;
const hasAccess = false;
const isSidebarOpen = true;

These names are clear because the answer can be yes or no.

Diagram 5. Main primitive types

1. number   → 20, 3.14, -7
2. string   → "Hello", 'Aaron'
3. boolean  → true, false
4. undefined → value not assigned yet
5. null     → empty value set intentionally

23. Special values: undefined and null

JavaScript has two special values that both mean "no value," but they are not exactly the same.

They are:

• undefined
• null

24. undefined

undefined usually means:

• the variable was declared
• but no value has been assigned yet

Example:

let value;
console.log(value); // undefined

So undefined often means:

• value not assigned yet
• value currently unknown

25. null

null means an empty value that is set intentionally.

Example:

let value = null;
console.log(value); // null

This is different from undefined.

With null, the developer is saying:

"There is no value here on purpose."

26. Difference between null and undefined

This difference is very important.

undefined

Means:

• the value has not been assigned yet
• or it is currently unknown

null

Means:

• the developer intentionally set the value as empty

Example

let firstValue;
console.log(firstValue); // undefined

let secondValue = null;
console.log(secondValue); // null

So:

• undefined = no value yet
• null = empty value on purpose

Diagram 6. undefined vs null

1. undefined
   - JavaScript gives this automatically
   - usually means "no value yet"

2. null
   - developer sets this manually
   - usually means "empty on purpose"

27. The typeof operator

The typeof operator is used to check the type of a value.

Syntax:

typeof operand

The result is a string telling you the type.

Examples

const quantity = 17;
console.log(typeof quantity); // "number"

const message = "JavaScript is awesome!";
console.log(typeof message); // "string"

const isSidebarOpen = false;
console.log(typeof isSidebarOpen); // "boolean"

let username;
console.log(typeof username); // "undefined"

let status = null;
console.log(typeof status); // "object"

28. Strange case: typeof null

This is a famous JavaScript detail.

Look at this:

let status = null;
console.log(typeof status); // "object"

This looks strange because null is not really an object.

In reality:

• null is a primitive value
• but typeof null returns "object"

Why?

Because of an old bug in early JavaScript. The bug stayed in the language for backward compatibility.

This is a very common interview question.

So remember:

• null is a primitive value
• but typeof null returns "object"

29. Arithmetic operations

JavaScript supports common arithmetic operators.

These operators work with numbers.

The result of an arithmetic operation is a value.

You can:

• print it
• store it in a variable
• use it inside another expression

30. Addition +

The + operator adds numbers.

const x = 8;
const y = 5;
console.log(x + y); // 13

31. Subtraction -

The - operator subtracts one number from another.

const x = 8;
const y = 5;
console.log(x - y); // 3

32. Multiplication *

The * operator multiplies numbers.

const x = 8;
const y = 5;
console.log(x * y); // 40

33. Division /

The / operator divides one number by another.

const x = 8;
const y = 5;
console.log(x / y); // 1.6

34. Remainder %

The % operator gives the remainder after division.

const x = 8;
const y = 5;
console.log(x % y); // 3

Because:

• 8 / 5 = 1
• 1 * 5 = 5
• 8 - 5 = 3

So the remainder is 3.

This operator is very useful, for example, when checking if a number is even or odd.

Example

const number = 10;
console.log(number % 2); // 0

Remainder 0 means the number is even.

35. Exponentiation **

The ** operator raises a number to a power.

const x = 8;
const y = 5;
console.log(x ** y); // 32768

This means:

8 * 8 * 8 * 8 * 8

Diagram 7. Arithmetic operators

1. +   addition
2. -   subtraction
3. *   multiplication
4. /   division
5. %   remainder
6. **  power

36. Order of arithmetic operations

JavaScript follows the usual math rules.

The order is generally:

1. parentheses
2. powers
3. multiplication and division
4. addition and subtraction

Example

console.log(2 + 3 * 4); // 14

Why?

Because multiplication happens before addition:

• 3 * 4 = 12
• 2 + 12 = 14

Example with parentheses

console.log((2 + 3) * 4); // 20

Why?

Because parentheses happen first:

• 2 + 3 = 5
• 5 * 4 = 20

So parentheses can change the result.

37. Small practical examples

Example 1. Creating variables

const username = "Aaron";
const age = 20;

console.log(username); // "Aaron"
console.log(age); // 20

Example 2. Reassigning with let

let city = "Kyiv";
console.log(city); // "Kyiv"

city = "Berlin";
console.log(city); // "Berlin"

Example 3. undefined

let color;
console.log(color); // undefined

Example 4. null

let selectedUser = null;
console.log(selectedUser); // null

Example 5. Checking types

const age = 20;
const name = "Nikita";
const isStudent = true;
let value;

console.log(typeof age); // "number"
console.log(typeof name); // "string"
console.log(typeof isStudent); // "boolean"
console.log(typeof value); // "undefined"

Example 6. Arithmetic

const a = 10;
const b = 3;

console.log(a + b);  // 13
console.log(a - b);  // 7
console.log(a * b);  // 30
console.log(a / b);  // 3.3333333333333335
console.log(a % b);  // 1
console.log(a ** b); // 1000

38. Helpful beginner notes

1. Use const most of the time

If the value does not need to change, use const.

2. Use let only when needed

Use let when the value must change during program execution.

3. Choose clear names

Bad names make code hard to understand. Good names make code easier to read.

4. Be careful with case

userName and username are different variables.

5. Read errors in the console

Error messages are not your enemy. They help you find the problem.

6. Remember the difference between "5" and 5

• "5" is a string
• 5 is a number

This difference matters a lot in JavaScript.

39. Full summary

Variable

A named container for storing data.

Declaration

Creating a variable with const or let.

Assignment

Giving a value to a variable with =.

Reassignment

Changing the value later.

const

Use when the value should not be reassigned.

let

Use when the value can change.

undefined

A value JavaScript gives when a variable exists but has no assigned value yet.

null

An intentionally empty value.

number

Numeric data type.

string

Text inside quotes.

boolean

Logical type with only two values: true and false.

typeof

Operator used to check the data type of a value.

Arithmetic operators

Symbols used for calculations: +, -, *, /, %, **

40. Quick revision block

1. Variable = named container for data
2. const = no reassignment
3. let = reassignment allowed
4. undefined = no value assigned yet
5. null = empty value on purpose
6. number = numeric value
7. string = text in quotes
8. boolean = true or false
9. typeof = checks data type
10. +, -, *, /, %, ** = arithmetic operators

41. Final conclusion

Variables are one of the most basic and most important parts of JavaScript.

If you understand:

• how to declare variables
• when to use const and let
• how data types work
• how to read common errors
• how arithmetic operators work

then you build a strong foundation for everything that comes later in JavaScript and full stack development.

The main goal is not only to remember the rules, but to practice reading code and understanding what each line does.